<template>
    <swiper class="swiper-container" :loop="true" :autoplay="{ delay: 2000 }" :pagination="{ clickable: true }">
       <swiper-slide class="swiper-slide">
         <img src="../../../assets/swiper01.jpg" alt="Image 1" />
       </swiper-slide>
       <swiper-slide class="swiper-slide">
         <img src="../../../assets/swiper02.jpg" alt="Image 2" />
       </swiper-slide>
       <div class="swiper-pagination"></div>
     </swiper>
     <div class="content-header">
       <ul class="header-list">
         <li>
           <router-link class="router-link" to="/latest">最新作品</router-link>
         </li>
         <li>
           <router-link class="router-link" to="/popular">精选作品</router-link>
         </li>
       </ul>
     </div>
</template>
<script setup>
 import { ref } from 'vue'
 
 const swiperOptions = ref({
   loop: true,
   autoplay: {
     delay: 2000,
   },
   pagination: {
     el: '.swiper-pagination',
     clickable: true,
   },
 })
</script>

<style scoped>

.swiper-container {
   height: 300px;
 }
 .content-header{
   width: 100%;
   height: 50px;
   background-color: rgb(35, 35, 35);
 }
 .header-list{
   display: flex;
   justify-content: center;
   list-style-type: none; /* 添加这一行移除li标签前的小圆点 */
   height: 50px;
   padding: 0;
 }
 .header-list li{
   color: white;
   margin-right: 15px; /* 添加这一行设置右边间距 */
   margin-left: 15px; /* 添加这一行设置左边间距 */
   line-height: 50px;
 }
 .header-list li:last-child {
   margin-right: 0; /* 移除最后一个li的右边距 */
 }
 
 .router-link {
   color: white;
   text-decoration:none;
   padding: 10px;
   border-bottom: 1px solid transparent; /* 添加这一行，设置边框底部 */
   transition: color 0.3s, border-color 0.3s; /* 添加过渡效果，包括边框颜色 */
 }

 .router-link:hover {
   color: #ff4081; 
   border-color: #ff4081; 
 }
 .router-link.router-link-active {
   color: #ff4081; /* 设置激活路由的文字颜色为红色 */
   border-color: #ff4081; /* 设置激活路由的边框颜色为红色 */
 }
 @media (max-width: 767px) {
   .swiper-container {
     height: 200px;
   }
 }
 
 @media (min-width: 768px) and (max-width: 991px) {
   .swiper-container {
     height: 250px;
   }
 }
 
 .swiper-slide img {
   width: 100%;
   height: 100%;
   /* object-fit: cover; */
 }
</style>
